<script setup lang='ts'>
import { ref } from 'vue'
const urls = [
    'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
    'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
    'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
    'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
    'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
    'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
    'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
]

const movies = ref([
    {
        image: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
        title: '来自星星',
        description: '好看好看哈哈哈'

    },
    {
        image: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
        title: '来自星星',
        description: '好看好看哈哈哈'

    }
    ,
    {
        image: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
        title: '来自星星',
        description: '好看好看哈哈哈'

    }
    ,
    {
        image: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
        title: '来自星星',
        description: '好看好看哈哈哈'

    }
    ,
    {
        image: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
        title: '来自星星',
        description: '好看好看哈哈哈'

    }
    ,
    {
        image: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
        title: '来自星星',
        description: '好看好看哈哈哈'

    }
    ,
    {
        image: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
        title: '来自星星',
        description: '好看好看哈哈哈'

    }
    ,
    {
        image: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
        title: '来自星星',
        description: '好看好看哈哈哈'

    }
    ,
    {
        image: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
        title: '来自星星',
        description: '好看好看哈哈哈'

    }
    ,
    {
        image: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
        title: '来自星星',
        description: '好看好看哈哈哈'

    }

])
</script>


<template>
   <!-- 轮播图 -->
   <el-carousel height="650px" indicator-position="outside">
                        <el-carousel-item v-for="item in urls" :key="item">
                            <el-image style="width: 100%; height: 100%" :src="item"></el-image>

                        </el-carousel-item>
                    </el-carousel>
                    <!--热门视频推荐  -->
                    <section class="HotVideo">

                        <div>
                            <el-row :gutter="20" style="height: 100px;" justify="space-between">
                                <el-col :span="14">
                                    <ul style="list-style-type: none;
                                       display: flex;
                                 justify-content: space-between;
                                             align-items: center;
                                         padding-left: 0;">
                                        <li>
                                            <h2>热播</h2>
                                        </li>
                                        <li>|</li>
                                        <li><a href="">全部</a></li>
                                        <li>电视剧</li>
                                        <li>综艺</li>
                                        <li>电影</li>
                                        <li>纪录片</li>


                                    </ul>
                                </el-col>
                                <el-col :span="2">
                                    换一换
                                </el-col>
                            </el-row>
                        </div>
                        <div class="movie-grid">
                            <div v-for="(movie, index) in movies" :key="index" class="movie-item">
                                <el-image :src="movie.image" style="    width: 100%;border-radius: 6%;
    height: 54%;">

                                </el-image>
                                <div class="movie-info">
                                    <a>{{ movie.title }}</a>
                                    <p> {{ movie.description }}</p>
                                    <el-button class="collect-btn">添加</el-button>

                                </div>

                            </div>
                        </div>

                    </section>
                    <!-- 全部视频展示加载 -->
                    <section class="AllVideo">
                        <div>
                            <el-row :gutter="20" style="height: 100px;" justify="space-between">
                                <el-col :span="14">
                                    <ul style="list-style-type: none;
                                       display: flex;
                                 justify-content: space-between;
                                             align-items: center;
                                         padding-left: 0;">
                                        <li>
                                            <h2>全部分类</h2>
                                        </li>
                                        <li>|</li>
                                        <li><a href="">全部</a></li>
                                        <li>爱情</li>
                                        <li>青春</li>
                                        <li>惊悚</li>
                                        <li>仙侠</li>
                                        <li>奇幻</li>
                                        <li>冒险</li>



                                    </ul>
                                </el-col>
                                <el-col :span="2">
                                    <el-link>更多</el-link>
                                </el-col>
                            </el-row>
                        </div>
                        <div class="allmovie-grid">
                            <div v-for="(movie, index) in movies" :key="index" class="movie-item">
                                <el-image :src="movie.image" style="    width: 100%;border-radius: 6% 6% 0 0;
    height: 66%;">

                                </el-image>
                                <div class="movie-info">
                                    <a>{{ movie.title }}</a>
                                    <p> {{ movie.description }}</p>
                                    <el-button class="collect-btn">添加</el-button>

                                </div>

                            </div>
                        </div>
                    </section>

</template>


<style lang='scss' scoped>

// 电影二行五列栅格布局
.movie-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(2, auto);
    gap: 10px;
}

.movie-item {
    position: relative;
    cursor: pointer;
    transition: background-color 0.3s ease;
    border-radius: 5%;
}

.movie-item:hover {
    background-color: rgba(128, 119, 128, 0.333);

}

.movie-info {
    position: relative;
    height: 70px;
    padding: 10px;
}

.collect-btn {
    position: absolute;
    bottom: 10px;
    right: 10px;
    display: none;
    background-color: #fe2c55;
    color: white;
    border: none;
    padding: 5px 10px;
    cursor: pointer;


}

.movie-item:hover .collect-btn {
    display: block;
}
//
.allmovie-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    // grid-template-rows: repeat(auto,auto);
    gap: 20px;
}

.allmovie-grid .movie-item {
    background-color: #555;
}

.allmovie-grid .movie-item .collect-btn {
    display: block;
}
</style>